<template>
	<view class="chat-operate-container">
		<view class="input-btn">
			<input cursor-spacing="10" :confirm-hold="true" type="text" auto-blur :adjust-position="true"
				@focus="inputFocus" @blur="inputBlur" v-model="sendText" class="chat-input" @confirm="send" @keyboardheightchange="keyboardheightchange" />
			<view class="emoji-btn" @click="emojiShow = !emojiShow">
				🙂
			</view>
			<view class="send-btn" @click="send">
				<image src="@/static/images/video/sendMsg.png" mode=""></image>
			</view>
		</view>
		<view class="emoji-box" v-if="emojiShow">
			<view class="" v-for="(item,index) in emojiList" :key="index" @click="sendText = sendText+item.val">
				<text>{{item.val}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import emojiList from '@/static/js/emoji.json'
	import {
		sendMessageToUser
	} from '@/common/tx_im.js'
	export default {
		props: {
			chatUserId: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				sendText: '',
				emojiList,
				emojiShow: false,
			}
		},
		methods: {
			// 发送
			send() {
				if (!this.sendText) {
					return
				}
				this.$emit('send', this.sendText + '', (success) => {
					success && (this.sendText = '')
				})
			},
			keyboardheightchange(){
				this.emojiShow = false
			},
			inputFocus() {
				this.emojiShow = false
			},
			inputBlur() {
				this.emojiShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.chat-operate-container {
		>.input-btn {
			height: 100rpx;
			background-color: #EBF0F6;
			display: flex;
			align-items: center;
			padding: 0 20rpx;

			.emoji-btn,
			.send-btn {
				font-size: 40rpx;
				line-height: 70rpx;
				height: 70rpx;
				text-align: center;
				width: 70rpx;
				border: 2rpx solid #000;
				margin-left: 20rpx;
				border-radius: 6rpx;
			}

			.send-btn {
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 50rpx;
					height: 50rpx;
					display: block;
				}
			}

			.chat-input {
				border-radius: 6rpx;
				flex: auto;
				height: 70rpx;
				border: 2rpx solid #000;
				padding: 0 10rpx;
			}
		}

		.emoji-box {
			font-size: 40rpx;
			display: flex;
			flex-wrap: wrap;

			>view {
				text-align: center;
				width: calc(100% / 13);
			}
		}
	}
</style>